import React, { Component } from 'react';
import list1 from '../list1.png'
import './List.scss'
class List extends Component {
    constructor(props){
        super(props);
        this.state = {  //定义数组状态
            arr:[
               
                {name:'护肤',pic:list1},
                {name:'彩妆',pic:list1},
                {name:'香氛',pic:list1},
                {name:'进口酒',pic:list1},
                {name:'国产酒',pic:list1},
                {name:'精品奢货',pic:list1},
                {name:'食品百货',pic:list1},
                {name:'母婴专区',pic:list1},
                {name:'直播专区',pic:list1},
                {name:'特卖专场',pic:list1},

            ]
        }
    }
    render() {
        return (
            <div className='list'>
                {
                //   列表渲染，使用js中的map函数
                  this.state.arr.map((item)=>{
                      return(
                          
                        <div className="cate">
                        <img src={item.pic} alt="" />
                        <div className="name"> {item.name} </div>
                    </div>

                      )
                  })
                }
            </div>
        );
    }
}

export default List;